Video Background

Hallo,

vorab und nur nebenbei hatte ich dazu auch bereits einmal eine Anleitung geschrieben: [CSS] Video Background. Für welches man sich aber nun entscheidet, bleibt hier an dieser Stelle jedoch jedem selbst überlassen

Dennoch sollte noch etwas zum </video>-Tag gesagt werden. Zwar gibt es derweil kaum noch Browser, die des gleichen nicht unterstützen, aber es gibt dennoch Browser die manche Medien nicht wiedergeben (können) oder aber auch Benutzer, die einfach kein Browser upgraden können, wollen oder schlicht weg auf Exotische Betriebssysteme zugreifen in welchen die Wiedergabe eines Videos im Background schlicht weg nicht möglich ist. Auf diese kann natürlich auch verzichtet werden, doch wäre es mit einfachen Mitteln möglich eine Abhilfe zu schaffen.

Dazu vorab ein Quellcodebeispiel:

<video playsinline autoplay muted loop poster="DEIN_PFAD_ZUM_HINTERGRUNDBILD.jpg" id="videoBackground">
  <source src="DEIN_PFAD_ZUM_VIDEO.webm" type="video/webm">
  <source src="DEIN_PFAD_ZUM_VIDEO.mp4" type="video/mp4">
  <source src="DEIN_PFAD_ZUM_VIDEO.ogg" type="video/ogg">
  <source src="DEIN_PFAD_ZUM_VIDEO.mov" type="video/quicktime">
  Dein Browser unterstützt leider kein Video-Tag!
</video>

Zu Erklärung im einzelnen:

1. poster="DEIN_PFAD_ZUM_HINTERGRUNDBILD.jpg"
   Sollte jemand ein Browser benutzen der ein Video-Tag unterstützt, so würde hier das Hintergrundbild greifen und dem Besucher/Benutzer an Stelle des eigentlichen Videos angezeigt werden.
2. <source src="DEIN_PFAD_ZUM_VIDEO.webm" type="video/mp4">
   Insofern ein Browser das .webm Format nicht unterstützen sollte (tun aber die meisten), so sollte zumindest eine Alternative (wenn nicht mehr) wie z.B.: .mp4 , .ogg oder .mov , etc. angeboten werden.
3. Dein Browser unterstützt leider kein Video-Tag!
   Hiermit sollte, insofern kein Video-Tag unterstützt wird, der Besucher/Benutzer darauf hingewiesen werden. Dazu kann innerhalb dieses Abschnittes auch ein Link eingefügt werden, welcher dem Besucher/Benutzer direkt auf den Video verweist. Dies macht jedoch aber auch nur Sinn insofern kein Poster (s.o.) genutzt wird, da dieses andernfalls vom gleichen überdeckt werden würde.

Ergänzung zu Punkt 2:

Um Videos zu konvertieren kann z.B. ein Online-Konverter wie Cloudconvert oder Convertigo genutzt werden. Solltest hingegen kein Video zur Verfügung stehen, so können Public-Domain Videos zum Beispiel bei Pixabay , Pexels , Vidsplay oder ein Anbieter Deiner Wahl gefunden werden.

Zitat von mipu

Kannste ja mal testen.

Code

 <div style="position: fixed; z-index: -99; width: 100%; height: 100%"> 
      <iframe frameborder="0" height="100%" width="100%"  
        src="https://youtube.com/embed/ID?autoplay=1&controls=0&showinfo=0&autohide=1"> 
      </iframe> 
 </div>

Da werde ich mal hoffen, dass die </iframe>-Methode wirklich nur zum testen genutzt wird

Gruss,
Andreas

Zitat von X0lfm4n

die methode will ich eigentlich umgehen aber dennoch danke

Auch wenn ich mich frage, was an der Methode so schlecht sein sollte, nichts zu danken

Gruss,
Andreas

Zitat von X0lfm4n

die yt variante mag irgendwie garnicht

Wenn ich Deinen Link folge, dann wird mir das Video angezeigt. Siehe folgenden Screenshot:

Zwar auf den Screenshot nicht in Video-Bewegung, aber auf Deiner Seite jedoch zu sehen. Wobei Du hier, wie in Deinen Quellcode zu sehen ist, jedoch auf eine lokale Video-Datei verweist und nicht wie von Dir ursprünglich gewünscht auf ein YouTube Video.

[info='warning']Bei Video-Backgrounds sollte stets auf die Auflösung und Dateigröße geachtet werden! Zu große Dateien würden die Ladezeit beeinträchtigen und bei zu kleinen Auflösungen würde das Video bei großen Monitoren unschön dargestellt werden.[/info]

Bezgl. diesen Hinweis macht es mir den Anschein, dass Du hier ein sehr großes Video nutzt, welches natürlich die Ladezeit beeinträchtigt. Meine Empfehlung wäre dazu u.a. wie bereits im vorherigen Beitrag von mir geschrieben wurde:

• mehrere Formate wie z.B. .webm , .mp4 , .ogg, .mov, etc. im <source>-Tag bereit zu stellen.
• die Dateigröße des Videos mit einen Konverter anzupassen, um damit die Ladezeit so gering wie möglich zu halten.
• Bei YouTube Videos kann das Video im Demo-Player bearbeitet und eingerichtet werden.

Zitat von X0lfm4n

allerdings fehlen da auch wieder ein paar sachen

Zum Beispiel, dass sich der gesamte Content über Dein Hauptmenü verlagert, wie auf dem folgenden Screenshot zu sehen ist:

Die Lösung zur Abhilfe wäre hier das Stichwort z-index: im Quellcode

Gruss,
Andreas

X0lfm4n

es ist vollkommen egal wie viele Seiten Du hast, welche Du mit einen Video-Hintergrund bestücken willst. Funktionieren tut dieses auf unendlich vielen Seiten. Vorausgesetzt natürlich, dass auf einer jenen gewünschten Seite, dass Video auch im <video> bzw. <iframe>-Tag eingebunden wird. Letzteres ist zwar weniger zu empfehlen, aber da dies hier schon angesprochen wurde, möchte ich dieses nicht noch einmal hervor kauen.

Um ein Video (gleichermaßen ob nun von YouTube oder einer lokalen Datei) auf einer bestimmten Seiten einblenden zu können, wäre es natürlich Hilfreich zu wissen, wo dieses genau eingebunden werden soll (Forum, Blog, Filebase, eigene Seite, etc.). Ohne solche Angaben, kann Dir da hier keiner weiter helfen. Eines ist aber sicher und das ist, dass dies sicher nur über ein Template-Eingriff funktionieren wird. Denn um ein solches Video auf bestimmten Seiten wie z.B. Forum, Blog, etc. einbinden zu können, bleibt Dir letztlich nur die Wahl über Templates. Bei eigenen Seiten sieht das wiederum anders aus, denn dort könnte das Video direkt per HTML eingefügt werden.

Gruss,
Andreas